@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-picker' !default;

.#{$prefix} {
  @include component-reset;

  display: inline-block;
  width: 100%;
  flex-shrink: 0;
  cursor: pointer;

  .#{$component-prefix}-tag-input-mock,
  .#{$component-prefix}-mock-input {
    cursor: pointer;

    &__suffix {
      color: use-color('gray', 500);
    }
  }

  // 耦合注入
  &--open {
    .#{$component-prefix}-mock-input {
      border-color: use-color-mode('primary');

      &__suffix {
        color: use-color-mode('primary');
      }

      &.invalid {
        .#{$component-prefix}-mock-input__suffix {
          color: use-color-mode('error');
        }
      }
    }

    .#{$component-prefix}-tag-input-mock {
      border-color: use-color-mode('primary');

      &__suffix {
        color: use-color-mode('primary');
      }

      &.invalid {
        .#{$component-prefix}-tag-input-mock__suffix {
          color: use-color-mode('error');
        }
      }
    }
  }

  // &--closed {
  //   .#{$component-prefix}-mock-input {
  //     &__suffix {
  //       color: use-color('gray', 500);
  //     }
  //   }

  //   .#{$component-prefix}-tag-input-mock {
  //     &__suffix {
  //       color: use-color('gray', 500);
  //     }
  //   }
  // }

  &__body {
    box-sizing: content-box;
    max-height: 260px;
    overflow-y: auto;
    padding: use-spacing(4) use-spacing(4);
  }

  $top-normal-shadow: 0 -2px 4px 0 rgba(31, 39, 51, 0.1) !default;

  &__footer {
    box-shadow: $top-normal-shadow;
    padding: use-spacing(5) use-spacing(7);
    background-color: use-color-static('white');
  }

  &__panel {
    padding: 0;
  }

  &__search {
    padding: use-spacing(4) use-spacing(4) 0;

    .#{$component-prefix}-input {
      &__prefix {
        padding-left: calc(#{use-spacing(4)} - 1px);
        color: use-color('gray', 700);
      }
    }
  }

  &__empty,
  &__loading {
    padding: use-spacing(5) use-spacing(4);
    font-size: use-text-size('normal');
    font-weight: use-text-weight('normal');
    color: use-color('gray', 500);
    line-height: use-text-lineheight('normal');
    display: flex;
    align-items: center;
  }

  &__loading {
    justify-content: space-between;
  }
}
